<template>
  <div class="marketing-coupon-container">
    <el-form label-width="100px">
      <el-form-item label="预计送达时间">
        <el-switch v-model="estimated.is_estimated" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <div v-if="estimated.is_estimated === '1'">
        <el-form-item label="预计送达时间">
          <el-select v-model="estimated.estimated_type" placeholder="请选择" style="width: 40%" @change="TimeTypeChange">
            <el-option label="每日" value="1"></el-option>
            <el-option label="每周" value="2"></el-option>
            <el-option label="按固定时间段" value="3"></el-option>
          </el-select>
        </el-form-item>
        <div v-if="estimated.estimated_type === '2'">
          <el-form-item label="星期">
            <el-checkbox-group v-model="estimated.estimated_data">
              <el-checkbox label="周一"></el-checkbox>
              <el-checkbox label="周二"></el-checkbox>
              <el-checkbox label="周三"></el-checkbox>
              <el-checkbox label="周四"></el-checkbox>
              <el-checkbox label="周五"></el-checkbox>
              <el-checkbox label="周六"></el-checkbox>
              <el-checkbox label="周日"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div v-if="estimated.estimated_type === '3'">
          <el-form-item :label="index === 0 ? '时间段' : ''" v-for="(item,index) in estimated.estimated_data" :key="index">
            <el-date-picker 
              type="date" 
              @input="input_change" 
              v-model="estimated.estimated_data[index]" 
              range-separator="至"
              start-placeholder="开始日期" 
              end-placeholder="结束日期" 
              value-format="yyyy-MM-dd"
              style="width: 40%"></el-date-picker>
            <el-time-picker 
              is-range 
              @input="input_change" 
              v-model="estimated.estimated_time[index]" 
              range-separator="至"
              start-placeholder="开始时间" 
              end-placeholder="结束时间" 
              placeholder="选择时间范围" 
              value-format="HH:mm:ss"
              style="width: 40%"></el-time-picker>
            <el-button type="text" @click="estimated.estimated_data.push(''); estimated.estimated_time.push('')">添加</el-button>
            <el-button type="text" v-if="index !== 0" @click="estimated.estimated_data.splice(index,1); estimated.estimated_time.splice(index,1)">删除</el-button>
          </el-form-item>
        </div>
        <div v-if="estimated.estimated_type !== '3'">
          <el-form-item :label="index === 0 ? '时间段' : ''" v-for="(item,index) in estimated.estimated_time" :key="index">
            <el-time-picker 
              is-range 
              @input="input_change" 
              v-model="estimated.estimated_time[index]"
              range-separator="至"
              start-placeholder="开始时间" 
              end-placeholder="结束时间" 
              placeholder="选择时间范围" 
              value-format ="HH:mm:ss"
              style="width: 40%"></el-time-picker>
            <el-button type="text" @click="estimated.estimated_time.push([new Date(), new Date()])">添加</el-button>
            <el-button type="text" v-if="index !== 0" @click="estimated.estimated_time.splice(index,1)">删除</el-button>
          </el-form-item>
        </div>
      </div>
      <el-button type="primary" style="padding:8px 30px;" @click="submit">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import { getAppSetting, putAppSetting } from '@/api/setting'

export default {
  components: {
  },
  data() {
    return {
      type: '1',
      appSettingData: {},
      estimated: {}
    }
  },
  created () {
    this.getAppSetting()
  },
  methods: {
    getAppSetting() {
      getAppSetting({ id: this.$store.state.app.activeApp.saa_id, key: this.$store.state.app.activeApp.saa_key }).then(res => {
        if(res.status === 200) {
          this.appSettingData = res.data;
          // this.show = true;
          this.estimated = this.appSettingData.estimated_service_time_info ? this.appSettingData.estimated_service_time_info : {estimated_type: "1", is_estimated: "0"};
          try{
            this.estimated.estimated_time = this.estimated.estimated_time.map(e => e.split(' - '))
          }catch(err) {
            console.log(err)
            this.estimated.estimated_time = [[new Date(), new Date()]]
          }
          
        }else if(res.status === 204) {
          // this.show = true;
        }
        else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 送达时间方式更改
     */
    TimeTypeChange() {
      if(this.estimated.estimated_type === '2') {
        this.estimated.estimated_time = [''];
        this.estimated.estimated_data = [];

      }else if(this.estimated.estimated_type === '3') {
        this.estimated.estimated_time = [''];
        this.estimated.estimated_data = [''];
      }else{
        this.estimated.estimated_time = [''];
        this.estimated.estimated_data = [];
      }
    },
    /**
     * 提交
     */
    submit() { 
      this.appSettingData.id = this.$store.state.app.activeApp.saa_id;
      this.appSettingData.key = this.$store.state.app.activeApp.saa_key;
      delete this.appSettingData.reduction_info;
      delete this.appSettingData.delete_time;
      let estimated_service_time_info = JSON.parse(JSON.stringify(this.appSettingData.estimated_service_time_info))
      estimated_service_time_info.estimated_time = estimated_service_time_info.estimated_time.map(e => `${e[0]} - ${e[1]}`)
      delete estimated_service_time_info.estimated_time
      putAppSetting({...this.appSettingData, estimated_service_time_info}).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
        }else{
          this.$message.error(res.message);
        }
      })
    },
    input_change() {

    }
  }
}
</script>

<style lang="scss" scoped>
.marketing-coupon-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
} 
.coupon-packet-container{
  padding: 20px 0;
}
.coupon-packet-row{
  margin: 15px 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &-col{
    padding: 0 15px;
    max-width: 95%;
    overflow: hidden;
    display: flex;
  }
}
</style>